<template>
  <div id="Adimin"> 
    <el-container>
      <!--边沿导航栏-->
      <el-aside :width="isCollapse?'64px':'200px'">
        <!--展开/合上的按钮-->
        <div class="toggle-button" 
          @click="toggleCollapse">|||</div>
        <el-menu
          :collapse="isCollapse"
          active-text-color="blue"
          class="el-menu-vertical-demo"
          router>
          <!--分类-->
          <el-submenu index="article1">
            <template slot="title">
              <i class="iconfont icon-fenlei"></i>
              <span>分类</span>
            </template>
            <el-menu-item 
              v-for="(item) in types"
              :key="item.id"
              :index="'1-'+item.id.toString()"
              :route="{
                path:'/admin/artical',
                query:{
                  msg:'type',
                  id:`${item.id}`}
              }">
              <i v-if="item.id=='x'" class="el-icon-setting"></i>
              {{item.name}}
              </el-menu-item>
          </el-submenu>
          <!--标签-->
          <el-submenu index="article2">
            <template slot="title">
              <i class="iconfont icon-iconset0328"></i>
              <span>标签</span>
            </template>
            <el-menu-item 
               v-for="(item) in tags"
              :key="item.id"
              :index="'2-' + item.id.toString()"
              :route="{
                path:'/admin/artical',
                query:{
                  msg:'tag',
                  id:`${item.id}`}
              }">
                <i v-if="item.id=='x'" class="el-icon-setting"></i>
                {{item.name}}
              </el-menu-item>
          </el-submenu>
          <!--草稿-->
          <el-menu-item index="/admin/artical?msg=draft">
            <i class="iconfont icon-caogao"></i>
            <span slot="title">草稿</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-main>
        <router-view/>
      </el-main>
    </el-container> 
  </div>
</template>

<script>
import '@/assets/iconfont/iconfont.css'
  export default {
    data() {
      return {
        types: [],//后端获取分类
        tags:[], //后端获取标签
        isCollapse:false,
      }
    },
    //监听路径的变化
    watch:{
      $route:{
        handler(val,old){
          this.msg = val.query.msg
          this.id = val.query.id
          this.getArticalById(val.query.msg, val.query.id)
        },
        deep:true
      }
    },
    created(){
      this.getTypes()
      this.getTags()  
    },
    methods: {
      //根据路径的变化跳转到对应的页面
      async getArticalById(msg,id){
        if(msg == 'type'){
          if(id == 'x'){
            this.$router.push('/admin/types')
          }
        }else if(msg == 'tag'){
          if(id == 'x'){
            this.$router.push('/admin/tags')
          }         
        }
      },
      //获取分类
      async getTypes(){
        const {data:res} = await this.$http.get('/blog/type/list')
        res.data.push({id:'x',name:'设置'})
        this.types = res.data
        console.log(this.types)
      },
      //获取标签
      async getTags(){
        const {data:res} = await this.$http.get('/blog/tag/list')
        res.data.push({id:'x',name:'设置'})
        this.tags = res.data
        console.log(this.tags)
      },


      async getUserInfo(){
        // 方法2:添加到参数中去...
        const res = await this.$http.post('/blog/admin/loginToken',{
          'Authorization':window.sessionStorage.getItem('token')
        })
      },


      //开闭侧边导航
      toggleCollapse(){
        this.isCollapse = !this.isCollapse
      },
      //展开行
      //删除某个标签，tag是标签上的值
      handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },
      //显示输入框
      showInput() {
        this.inputVisible = true;
        // $nextTick方法的作用：当页面上元素被重新传染之后，才会指定回调函数中的代码
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      //添加新标签
      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },  








    
    }
  }
</script>
<style scoped>
  .iconfont{
    margin-right:10px;
    font-weight: bold;
    font-size:24px;
  }
  .el-menu{
    border-right:0;
  }
  .toggle-button{
    font-size:10px;
    line-height:24px;
    text-align:center;
    letter-spacing:0.2em;
    cursor:pointer;
  }
  #Adimin{
    z-index:1;
  }
  .el-container{
    z-index:1;
  }




</style>